import { computed } from 'vue'
import { useElementSize } from '@vueuse/core'

export const useListCols = (el: any) => {
	const { width } = useElementSize(el)

	const colsClass = computed(() => {
		if (width.value > 1100) {
			return 'grid-cols-4'
		} else if (width.value > 800) {
			return 'grid-cols-3'
		} else if (width.value > 500) {
			return 'grid-cols-2'
		} else {
			return 'grid-cols-1'
		}
	})

	const slotCols = computed(() => {
		if (width.value > 1135) {
			return 9
		} else if (width.value > 690) {
			return 6
		} else if (width.value > 480) {
			return 4
		} else if (width.value > 380) {
			return 3
		} else {
			return 2
		}
	})
	const sloBigWinCols = computed(() => {
		if (width.value > 1200) {
			return 13
		} else if (width.value > 1100) {
			return 12
		} else if (width.value > 1000) {
			return 11
		} else if (width.value > 800) {
			return 10
		} else if (width.value > 700) {
			return 9
		} else if (width.value > 600) {
			return 8
		} else if (width.value > 500) {
			return 7
		} else {
			return 6
		}
	})

	const cols = computed(() => {
		if (width.value > 1100) {
			return 4
		} else if (width.value > 800) {
			return 3
		} else if (width.value > 500) {
			return 2
		} else {
			return 1
		}
	})

	const colsMedium = computed(() => {
		if (width.value >= 1390) {
			return 6
		} else if (width.value > 1290) {
			return 5
		} else if (width.value > 1090) {
			return 5
		} else if (width.value > 568) {
			return 4
		} else {
			return 3
		}
	})
	const colsTags = computed(() => {
		if (width.value >= 1390) {
			return 9
		} else if (width.value > 1190) {
			return 8
		} else if (width.value > 890) {
			return 8
		} else if (width.value > 568) {
			return 6
		} else {
			return 3
		}
	})
	const lgCols = computed(() => {
		if (width.value > 800) {
			return 3
		} else if (width.value > 500) {
			return 2
		} else {
			return 1
		}
	})

	return { colsClass, cols, slotCols, sloBigWinCols, width, lgCols, colsMedium, colsTags }
}
